<!--宠物信息-->
<template>
  <div class="row">
    <div class="container">
      <el-form :inline="true"  class="demo-form-inline"
               :style="{marginTop: '20px',float: 'left'}">
        <el-form-item>
          <el-select style="width: 110px" v-model="requestData.requestData.user_id" placeholder="主人昵称">
            <el-option
              v-for="item in optionsUserId"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 110px" v-model="requestData.requestData.name" placeholder="宠物名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="requestData.requestData.allTime"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="addVisible">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        stripe
        border
        size="mini"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          prop="user_id"
          label="主人昵称"
          align="center"
          :formatter="dataFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="file_name"
          label="宠物图片"
          align="center"
        >
          <template slot-scope="scope">
            <img style="width: 80px;height: 30px"
                 :src="$image + scope.row.picture"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="宠物名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          align="center"
          :formatter="dataFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="birth_date"
          label="出生日期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="描述"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="create_user"
          align="center"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="create_date"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="update_date"
          align="center"
          label="修改时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editParam(scope.row)" type="warning">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteParam(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <!--信息修改-->
      <el-dialog style="text-align: left" :title="addOrUpdate == 1 ? `宠物信息新增` : `宠物信息修改`" top="5vh" :visible.sync="outerVisible">

        <el-form ref="form" :model="addParam" label-width="120px" style="margin-top: 30px">
          <el-form-item label="宠物主人">
            <el-select v-model="addParam.user_id" placeholder="请选择">
              <el-option
                v-for="item in optionsUserId"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="宠物图片">
            <span v-if="addParam.picture !== '' && addParam.picture !== undefined">上传成功：{{addParam.file_name}}</span>
            <el-upload
              class="upload-demo"
              ref="businessLicense"
              action
              :data="{data:111}"
              :auto-upload="false"
              :on-change="healthCodeUploadSectionFile"
              :file-list="fileList.pet_code"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传word/pdf文件</div>
            </el-upload>
          </el-form-item>


          <el-form-item label="宠物名称">
            <el-input v-model="addParam.name" ></el-input>
          </el-form-item>
          <el-form-item label="宠物性别">
            <el-select v-model="addParam.sex" placeholder="请选择">
              <el-option
                v-for="item in initSelect.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宠物类型">
            <!--<el-input v-model="addParam.type" ></el-input>-->
            <el-select v-model="addParam.type" placeholder="请选择">
              <el-option
                v-for="item in initSelect.type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="宠物年龄">
            <el-input v-model="addParam.age" ></el-input>
          </el-form-item>
          <el-form-item label="宠物出生日期">
            <!--<el-input v-model="addParam.birth_date" ></el-input>-->
            <el-date-picker
              v-model="addParam.birth_date"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="宠物出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="宠物描述">
            <el-input type="textarea" v-model="addParam.remark" ></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSubmit">提交</el-button>
          <el-button type="info" @click="outerVisible = false">取消</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
  export default {
    name: "infoList",
    data() {
      return {
        fileList:{
          pet_code:[],
        },
        list: [],
        total: 0,
        optionsUserId: [],
        outerVisible: false,
        approvalVisible: false,
        editAndDeleteButton: false,
        addOrUpdate:1,//1增2改
        leaveDts: [],
        initSelect: {
          sex:[{label:'公',value:0},{label:'母',value:1}],
          type:[]
        },
        requestData: {
          current: 1,
          pageSize: 10,
          requestData: {
            user_id: '',
            name: '',
            allTime: '',
          }
        },
        addParam: {
          name:'',
          user_id:'',
          remark:'',
          picture:'',
          birth_date:'',
          age:'',
          sex: 0,
          type:''
        },
        labelName:{
          name:'宠物名称为空,请输入！',
          user_id:'宠物主人未选择,请选择！',
          remark:'宠物描述为空,请输入！',
          picture:'宠物图片为空,请上传！',
          // age:'宠物年龄为空,请输入！',
          sex:'宠物性别为空,请输入！',
          type:'宠物类型为空,请输入！',
          birth_date:'宠物类型为空,请输入！',
        },
      }
    },
    created() {
      this.initOptionsUserId()
      this.initButton()
      // this.user = JSON.parse(sessionStorage.getItem("userInfo"))
    },
    mounted() {

    },
    methods: {
      /*宠物图片*/
      healthCodeUploadSectionFile(file) {
        this.fileList.pet_code = [];
        // const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
        const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'];
        const isJPG = typeArr.indexOf(file.raw.type) !== -1;
        if (!isJPG) {
          this.$message.error('只能word,或者PDF!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        this.files = file.raw;
        // FormData 对象
        let formData = new FormData();
        // 文件对象
        formData.append('file', this.files);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          methods: 'post'
        }
        this.service.post("/tbowner/fileUpload", formData, config).then(res => {
          this.addParam.picture = res.data.filename
          this.fileList.pet_code.push({name:res.data.filename,url:this.$a + '/tbowner/images?fileName=' + res.data.filename})
        })
      },
      initOptionsUserId() {
        this.service.get('/tbowner/getAll'
          , this.requestData)
          .then(result => {
            this.optionsUserId = []
            this.initSelect.user_id = []
            let data = result.data.data;
            for (let i = 0; i < data.length; i++) {
              this.optionsUserId.push({
                value: parseInt(data[i].id),
                label: data[i].name
              })
              this.initSelect.user_id.push({
                value: parseInt(data[i].id),
                label: data[i].name
              })
              this.initList()
            }
          })


        this.service.get('/tbPetTypeInfo/getAll'
          , this.requestData)
          .then(result => {
            this.initSelect.type = []
            let data = result.data.data;
            for (let i = 0; i < data.length; i++) {
              this.initSelect.type.push({
                value: parseInt(data[i].id),
                label: data[i].name
              })
            }
            this.initList()
          })

      },
      checkParam(){
        for (let item in this.addParam){
          if(this.addParam[item].length < 1){
            return this.labelName[item];
          }
        }
        return null;
      },

      addVisible(status){
        for (let item in this.addParam) {
          this.addParam[item] = ''
        }
        this.fileList.pet_code = []
        this.addParam.sex = 0
        this.addOrUpdate = 1
        this.outerVisible = true
      },

      add(){
        if(this.checkParam() != null ){
          this.$message.error(this.checkParam());
          return false;
        }

        this.service.post('/tbpPetInfo/add'
          , {data:this.addParam})
          .then(result => {
            let data = result.data;
            if(data.code == 500){
              this.$message.error("请求失败：" + data.data)
            }
            if(data.data > 0){
              this.$message.success('增加成功')
              for(let item in this.addParam){
                this.addParam[item] = '';
              }
              for(let item in this.fileList){
                this.fileList[item] = [];
              }
              this.initList();
              this.outerVisible = false
            }else {
              this.$message.error('增加失败')
            }
          })
      },

      /**公共变量*/
      dataFormatter(row, column) {
        console.log(row)
        console.log(column)
        let arrayData = this.initSelect[column.property];
        console.log(arrayData)
        for (let i = 0; i < arrayData.length; i++) {
          if(arrayData[i].value==row[column.property]){
            return arrayData[i].label
          }
        }
      },
      editSubmit() {
        if(this.addOrUpdate == 1){
          this.add()
          return false
        }
        this.service.post('/tbpPetInfo/add'
          , {data: this.addParam})
          .then(result => {
            let data = result.data;
            if (data.code == 500) {
              this.$message.error("请求失败：" + data.data)
            }
            if (data.data > 0) {
              this.$message.success('修改成功')
              this.initList();
              this.outerVisible = false;
            } else {
              this.$message.error('修改失败')
            }
          })
      },
      initList() {
        this.service.post('/tbpPetInfo/list'
          , this.requestData)
          .then(result => {
            this.list = result.data.data.data;
          })
      },
      editParam(row) {
        this.addOrUpdate = 2
        this.fileList.pet_code = []
        this.addParam = JSON.parse(JSON.stringify(row));
        this.fileList.pet_code.push({name:this.addParam.file_name,url:this.$a + '/tbowner/images?fileName=' + this.addParam.picture})
        this.outerVisible = true;
      },
      deleteParam(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.service.post('/tbpPetInfo/del'
            , {data: row.id})
            .then(result => {
              let data = result.data;
              if (data.data > 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.initList()
              } else {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      initButton() {
        let userInfo = sessionStorage.getItem("userInfo");
        if (userInfo == undefined || userInfo == null) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          }).then(() => {
            this.$router.push('/home/login')
          })
          return false;
        }
        let json = JSON.parse(sessionStorage.getItem("userInfo"));
        if (json.role_id == 0) {
          this.editAndDeleteButton = true;
        }
      },
      onSubmit() {
        this.requestData.requestData.start_time = this.requestData.requestData.allTime[0]
        this.requestData.requestData.end_time = this.requestData.requestData.allTime[1]
        this.initList()
      },
      reset() {
        for (let item in this.requestData.requestData) {
          this.requestData.requestData[item] = '';
        }
      },
    }
  }
</script>

<style scoped>

</style>
